<script setup lang="ts">

import GoodsCard from '@/components/GoodsCard.vue'
import { useRouter } from 'vue-router'
import GoodsCardList from '@/components/GoodsCardList.vue'
import { ref } from 'vue'
import { ShoppingCart } from '@element-plus/icons-vue'

const router = useRouter()
const goToPay = () => {
  router.push('/payment')
}

const goodsList = [
  { title: '纯肉鲜肉（水饺）', imageUrl: 'src/assets/pic/sp01.png', text: '新鲜猪肉', description: '$15' },
  { title: '玉米猪肉（水饺）', imageUrl: 'src/assets/pic/sp02.png', text: '玉米猪肉', description: '$18' },
  { title: '虾仁三鲜（蒸饺）', imageUrl: 'src/assets/pic/sp03.png', text: '虾仁三鲜', description: '$16' },
  { title: '素三鲜（水饺）', imageUrl: 'src/assets/pic/sp04.png', text: '素三鲜', description: '$12' },
  { title: '角瓜鸡蛋（水饺）', imageUrl: 'src/assets/pic/sp05.png', text: '角瓜鸡蛋', description: '$5' },
  { title: '小白菜肉（水饺）', imageUrl: 'src/assets/pic/sp06.png', text: '小白菜肉', description: '$20' },
  { title: '芹菜牛肉（水饺）', imageUrl: 'src/assets/pic/sp07.png', text: '芹菜牛肉', description: '$25' },
]

const total = ref(0)
function updateTotal(val: number) {
  total.value = val
}
</script>

<template>
  <div
    class="w-full h-12vw bg-blue-500 text-white text-4.8vw fixed left-0 top-0 z-1000 flex justify-center items-center">
    商家信息
  </div>
  <div class="pt-2 pb-20">
    <div class="w-full h-12vw text-center">
      <img src="D:\project_all\elm\src\assets\pic\sj01.png">
      <div class="text-2xl font-bold">万家饺子</div>
      <div class="text-gray-500 text-base">$15起送 ￥3配送</div>
      <div class="text-gray-500 text-base">各种饺子炒菜</div>
      <GoodsCardList :goods="goodsList" @update:total="updateTotal" />
    </div>
  </div>
  <div class="h-15 fixed bottom-0 left-0 w-full flex justify-center flex-row">
    <div class="w-2/3 bg-gray-800 flex flex-row">
      <div class="w-1/6 bg-gray-800"></div>
      <div class="w-15 h-15 rounded-full bg-blue-500">
      </div>

      <div class="flex flex-col justify-center pl-2">
        <div class="text-white text-xl font-bold">${{ total.toFixed(2) }}</div>
        <div class="text-gray-500 text-base">配送费3元</div>
      </div>
    </div>
    <div class="w-1/3 flex flex-row bg-green-500 h-15 items-center justify-center">
      <div class="text-white text-xl font-bold pl-5 cursor-pointer" @click="goToPay">去支付</div>
    </div>
  </div>
</template>
